@charset "utf-8";
@import url("http://www.w3cplus.com/download/reset.css");
/* -------------------------------------------------
 * common
 * -------------------------------------------------
*/
.page{
    text-align:left;
	padding-top:40px;
}
.wrap_top_nav{
    background-color:#333;
	box-shadow:0 1px 3px rgba(0, 0, 0, 0.25), 0 -1px 0 rgba(0, 0, 0, 0.1) inset;
	height:40px;
}
#top_nav{
    width:1000px;
	margin:0 auto;
	position:relative;
}
#top_nav a{
    font-size:16px;
	line-height:40px;
	float:left;
	margin-right:20px;
	color:#999;
	text-decoration:none;
}
#top_nav a:hover{
    color:#fff;
}
#top_nav li:nth-child(1) a{
    background-image:url(http://www.w3cplus.com/sites/all/themes/marvin/logo.png);
	background-position: 0 -12px;
    background-repeat: no-repeat;
    background-size: 68px 60px;
	padding-left:74px;
	color:#fff;
	width:74px;
	overflow:hidden;
}
#read{
    position:absolute;
	right:0;
	top:0;
	font-family:'����';
}
#header{
    text-align:center;
}
#header .white{
    color:#fff;
}
#header .blank{
    color:#444;
}
#header h1{
    font-size:24px;
}
#header h2{
	font-weight:normal;
}
#ad_w3cplus {
	width: 750px;
	margin: 100px auto;
	text-align: center;
}
#ad_w3cplus .grid-ad {
 float:left;
}
.demo {
  width: 100%;
  margin: 20px auto;
} 
.nav:after,
.nav:before {
  content:"";
  display: table;
} 
.nav:after {
  clear:both;
  overflow:hidden;
}
.nav {
  zoom: 1;
  margin-left: 20px;
}
.nav li {
  list-style: none outside none;
  float: left;
  position: relative;/*这个很重要*/
}
.nav .active {
  z-index: 3;/*当前项在最顶端*/
}
.nav li:before,
.nav li:after,
.nav  a:before,
.nav  a:after {
  content:"";
  position: absolute;
  bottom:0;

}
.nav li:before,
.nav li:after {
  background: rgb(10, 41, 30);
  width: 10px;
  height: 10px;
}
.nav li:before {
  left: -10px;
}
.nav li:after {
  right: -10px;
}
.nav a {
  float: left;
  padding: 10px 40px;
  text-decoration: none;
  color: rgb(220, 225, 233);
  background: rgb(10, 41, 30);
  border-radius: 10px 10px 0 0;
}
.nav .active a {
  background: rgb(220, 225, 233);
  color:rgb(10, 41, 30);
}

.nav  a:before,
.nav  a:after {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background: rgb(10, 41, 30);
  z-index: 2;/*圆形在矩形上面*/
}
.nav .active a:before,
.nav .active a:after {
  background: rgb(10, 41, 30);
}
.nav  a:before {
  left:-20px; 
}
.nav  a:after {
  right: -20px;
}
/*当前项的:after和:before的z-index值为1*/
.nav .active:before,
.nav .active:after {
  z-index: 1;/*当前项的矩形在圆形下面*/
  background: rgb(220, 225, 233);
}
/*第一个选项卡的:before和最后一个选项卡的:after背景色不一样*/
.nav li:first-child a:before,
.nav li:last-child a:after {
  background-color: #fff;
}
.tab-content {
  background: rgb(220, 225, 233);
  color:rgb(10, 41, 30);
  padding: 20px;
}
.tab-pane {
  display: none;
}
.tab-pane.active {
  display: block;
}